<template>
  <div class="about">
    <h1></h1>
  <!-- <el-empty description="毕设演示用"></el-empty> -->
   <el-container>
  <el-header > <el-card shadow="always">  ACG展览购票网站  <router-link :to="{name:'select'}"><el-button  icon="el-icon-search">票务查询</el-button></router-link></el-card></el-header>
  <el-main>
      <el-container>
  <el-main>
    
    
  <el-carousel height="700px" direction="horizontal" :autoplay="true" >
    <el-carousel-item v-for="item in blog" :key="item">
      
      <el-image :src="blog.picture" style="height: 100%;width:100%" :fit="contain" /> 
     
      <!--<el-card shadow="always"></el-card>-->
    </el-carousel-item>
  </el-carousel>
   
 <el-footer></el-footer>
        <el-container>
          
  <el-header><el-card shadow="always">相关票务</el-card></el-header>
  

  <el-main>
    

    <el-card shadow="always" v-for="(blog,key) in blogs.slice(0,3)" :key=key >
      <router-link :to="{name:'tickmsg',params:{blogId:blog.id}}">
      <el-col :span="24"><div class="grid-content bg-purple-light">{{blog.title}} ({{blog.starttime}}) </div> </el-col>
      <el-divider></el-divider>
      <el-row :gutter="20" >
  <el-col :xs="8" :sm="6" :md="2" :lg="2" :xl="1"><div class="grid-content bg-purple-light"><i class="el-icon-s-ticket"></i></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"><el-image :src="blog.picture" style="height: 100px;" /></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple">位置:{{blog.description}}</div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light">价格:{{blog.price}}</div></el-col>
 
</el-row>
  </router-link>
    </el-card>
  </el-main>
</el-container>

  </el-main>
</el-container>



    
  </el-main>
</el-container>

  </div>
  

  
</template>


<script>
export default {
data() {
   return {
     blogs:{},
     blog:{
       picture:"http://127.0.0.1:8081/img/2022/02/20/87f02dd9-5f77-4230-8755-9a0f42021cee.jpg"
     }
   }
},

 created(){
     
      console.log("test")
          const _this = this
          _this.$axios.get("/newticks?currentpage=" + 1).then(res => {
            console.log('currentpagemessage:')
          console.log(res)
          _this.blogs = res.data.data.records
          })
  }
}
</script>

<style>

</style>